<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过属性值控制元素的显示和隐藏</title>
</head>
<body>
<div id="change" class="change">
    <h1 data-show="true" style="background-color: red">Hello, World!</h1>
    <h1 data-show="false" style="background-color: green">Hello, World!</h1>
</div>

<script>
    // 选择目标元素
    let elements = document.querySelectorAll("#change > h1");

    for (let i = 0; i < elements.length; i++) {
        let element = elements[i]

        console.log(element);

        // 获取属性的值
        let attributeValue = element.getAttribute("data-show");
        console.log(attributeValue);

        // 根据属性的值判断是否显示
        if (attributeValue === "true") {
            //  element.style.display
        }
        else {
            // 在 元素的  style 属性添加  display:None
            element.style.display = "None"
        }

        element.removeAttribute("data-show")


    }
</script>
</body>
</html>